React useEvent : Stabiliser les gestionnaires d'événements pour des applications robustes

Utiliser `useEvent` en pratique

Revisitons les exemples précédents et appliquons `useEvent` pour résoudre les problèmes.

Corriger les fermetures obsolètes

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Maintenant, `handleClick` est une fonction stable, mais lorsqu'elle est appelée, elle accède à la valeur la plus récente de `count` via la référence. Cela empêche le problème de fermeture obsolète.

Empêcher les re-rendus inutiles

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Étant donné que `handleClick` est maintenant une référence de fonction stable, `ChildComponent` ne sera re-rendu que lorsque ses props *changent réellement*, améliorant ainsi les performances.

Implémentations alternatives et considérations

`useEvent` avec `useLayoutEffect`

Dans certains cas, vous devrez peut-être utiliser `useLayoutEffect` au lieu de `useEffect` dans l'implémentation `useEvent`. `useLayoutEffect` se déclenche de manière synchrone après toutes les mutations du DOM, mais avant que le navigateur n'ait la possibilité de peindre. Cela peut être important si le gestionnaire d'événements doit lire ou modifier le DOM immédiatement après le déclenchement de l'événement. Cet ajustement garantit que vous capturez l'état du DOM le plus récent dans votre gestionnaire d'événements, évitant ainsi les incohérences potentielles entre ce que votre composant affiche et les données qu'il utilise. Le choix entre `useEffect` et `useLayoutEffect` dépend des exigences spécifiques de votre gestionnaire d'événements et du calendrier des mises à jour du DOM.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Mises en garde et problèmes potentiels

• Complexité: Bien que `useEvent` résolve des problèmes spécifiques, il ajoute une couche de complexité à votre code. Il est important de comprendre les concepts sous-jacents pour l'utiliser efficacement.
• Surutilisation: N'utilisez pas `useEvent` sans discernement. Appliquez-le uniquement lorsque vous rencontrez des fermetures obsolètes ou des re-rendus inutiles liés aux gestionnaires d'événements.
• Test: Tester les composants qui utilisent `useEvent` nécessite une attention particulière pour garantir que la logique de gestionnaire correcte est exécutée. Vous devrez peut-être simuler le hook `useEvent` ou accéder directement à `handlerRef` dans vos tests.

Perspectives mondiales sur la gestion des événements

Lors de la création d'applications pour un public mondial, il est essentiel de tenir compte des différences culturelles et des exigences d'accessibilité dans la gestion des événements :

• Navigation au clavier : Assurez-vous que tous les éléments interactifs sont accessibles via la navigation au clavier. Les utilisateurs de différentes régions peuvent compter sur la navigation au clavier en raison de handicaps ou de préférences personnelles.
• Événements tactiles : Prenez en charge les événements tactiles pour les utilisateurs sur les appareils mobiles. Tenez compte des régions où l'accès à Internet mobile est plus répandu que l'accès de bureau.
• Méthodes de saisie : Tenez compte des différentes méthodes de saisie utilisées dans le monde, telles que les méthodes de saisie chinoises, japonaises et coréennes. Testez votre application avec ces méthodes de saisie pour vous assurer que les événements sont gérés correctement.
• Accessibilité : Suivez toujours les meilleures pratiques d'accessibilité, en vous assurant que vos gestionnaires d'événements sont compatibles avec les lecteurs d'écran et autres technologies d'assistance. Ceci est particulièrement crucial pour les expériences utilisateur inclusives dans divers contextes culturels.
• Fuseaux horaires et formats de date/heure : Lorsque vous traitez des événements qui impliquent des dates et des heures (par exemple, des outils de planification, des calendriers de rendez-vous), tenez compte des fuseaux horaires et des formats de date/heure utilisés dans différentes régions. Fournissez aux utilisateurs des options pour personnaliser ces paramètres en fonction de leur emplacement.

Alternatives à `useEvent`

Bien que `useEvent` soit une technique puissante, il existe des approches alternatives pour gérer les gestionnaires d'événements dans React :

• Remonter l'état : Parfois, la meilleure solution consiste à remonter l'état dont dépend le gestionnaire d'événements vers un composant de niveau supérieur. Cela peut simplifier le gestionnaire d'événements et éliminer le besoin de `useEvent`.
• `useReducer`:** Si la logique d'état de votre composant est complexe, `useReducer` peut aider à gérer les mises à jour d'état de manière plus prévisible et à réduire la probabilité de fermetures obsolètes.
• Composants de classe : Bien que moins courants dans React moderne, les composants de classe fournissent un moyen naturel de lier les gestionnaires d'événements à l'instance du composant, évitant ainsi le problème de fermeture.
• Fonctions en ligne avec dépendances : Utilisez des appels de fonction en ligne avec des dépendances pour vous assurer que des valeurs fraîches sont transmises aux gestionnaires d'événements. `onClick={() => handleClick(arg1, arg2)}` avec `arg1` et `arg2` mis à jour via l'état créera une nouvelle fonction anonyme à chaque rendu, assurant ainsi des valeurs de fermeture mises à jour, mais entraînera des re-rendus inutiles, ce que `useEvent` résout.